<template>
  <div class='cpzx'>
    <div class="banner">
      <img :src = 'bannerImg'>
    </div>
    <div class="content">
      <ul class="tab">
        <li v-for='(item,index) in tab' @click='active(item, index)' :key='index'>
          <span :class='index==activeSty?"activeSty":""'>{{item.title}}</span>
        </li>
      </ul>
      <div class="cpzx-content">
        <h2>软件平台</h2>
        <h3>Software Platform</h3>
      </div>
      <ul class="cpzx-list">
        <li v-for='(item , index) in cpList' :key='index' @click='toTop'>
          <router-link tag='a' :to="{path:'/cpzxdetail',query:{id:item.id}}" >
            <div>
              <img class='product-title' :src='item.icon'>
              <h5>{{item.title}}</h5>
              <p>{{item.text}}</p>
            </div>
            <img class='product-icon' src="../assets/images/industryListArr.png" alt="">
          </router-link>
        </li>
      </ul>
      <el-pagination background layout="prev, pager, next" :page-size="6" :total="54"></el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Cpzx',
  data () {
    return {
      bannerImg: require('../assets/images/cpzxBanner.png'),
      activeSty: 0,
      tab: [
        {
          title: '软件平台',
          code: 'rjpt'
        },
        {
          title: '监测硬件',
          code: 'jcyj'
        },
        {
          title: '会商硬件',
          code: 'hsyj'
        },
        {
          title: '发布终端硬件',
          code: 'zdyj'
        }
      ],
      cpList: [
        {
          id: '01',
          icon: require('../assets/images/cp1.png'),
          title: '生态站展示平台',
          text: '平台主要内容包括：旅游业、基金相关的整合发布；景区、旅游路线的全面介绍；景区门票、住宿的预订和特色农产品在线购买；基金管理委员会的成员介绍；中国天然氧吧相关的研讨会、培训班资讯。',
          to: 'yjzh'
        },
        {
          id: '02',
          icon: require('../assets/images/cp2.png'),
          title: '海洋监测与预报平台',
          text: '通过研究遥感，全球定位，地理信息技术与渔业相结合，解决渔业空间分布不均，渔民安全难以得到保障，信息不能及时传递等问题。通过建立渔业通讯和导航综合指挥系统等高新技术加速了渔业生产现代化。',
          to: 'yjzh'
        },
        {
          id: '03',
          icon: require('../assets/images/cp3.png'),
          title: '分布式会商业务平面',
          text: '分布式会商平面设计与建设系统提供基于音频、视频、传输、控制等功能集一身的平台，它包括会商音频互通、会商设备控制及多种会商模式切换等功能，是完美契合气象局综合业务平台业务需求的一套系统。',
          to: 'yjzh'
        },
        {
          id: '01',
          icon: require('../assets/images/cp1.png'),
          title: '生态站展示平台',
          text: '平台主要内容包括：旅游业、基金相关的整合发布；景区、旅游路线的全面介绍；景区门票、住宿的预订和特色农产品在线购买；基金管理委员会的成员介绍；中国天然氧吧相关的研讨会、培训班资讯。',
          to: 'yjzh'
        },
        {
          id: '02',
          icon: require('../assets/images/cp2.png'),
          title: '海洋监测与预报平台',
          text: '通过研究遥感，全球定位，地理信息技术与渔业相结合，解决渔业空间分布不均，渔民安全难以得到保障，信息不能及时传递等问题。通过建立渔业通讯和导航综合指挥系统等高新技术加速了渔业生产现代化。',
          to: 'yjzh'
        },
        {
          id: '03',
          icon: require('../assets/images/cp3.png'),
          title: '分布式会商业务平面',
          text: '分布式会商平面设计与建设系统提供基于音频、视频、传输、控制等功能集一身的平台，它包括会商音频互通、会商设备控制及多种会商模式切换等功能，是完美契合气象局综合业务平台业务需求的一套系统。',
          to: 'yjzh'
        }
      ]
    }
  },
  methods: {
    active (item, index) {
      this.activeSty = index
    },
    toTop () {
      document.documentElement.scrollTop = document.body.scrollTop = 0
    }
  }
}
</script>
<style lang="less" scoped>
.cpzx{
  .banner{
    width: 100%;
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .tab{
      overflow: hidden;;
      width:540px;
      margin: 70px auto;
      li{
        float: left;
        cursor: pointer;
        margin-right: 20px;
        &:last-of-type{
          margin-right: 0;
        }
        span{
          display: block;
          padding: 10px 15px;
          font-size: 20px;
          font-weight: Medium;
          color: #666666;
          &.activeSty{
            background:linear-gradient(0deg,rgba(32,166,196,1),rgba(126,213,233,1));
            box-shadow:0px 2px 13px 2px rgba(15,87,104,0.06);
            border-radius:20px;
            color: #ffffff;
          }
        }
      }
    }
    .cpzx-content{
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
    }
    .cpzx-list{
      overflow: hidden;
      // height:470px;
      padding:10px 0;
      li{
        position: relative;
        text-align: center;
        width: 384px;
        height: 450px;
        float: left;
        margin-right: 20px;
        margin-bottom: 75px;
        background: #ffffff;
        border-radius: 10px;
        border:1px solid rgba(238,238,238,1);
        cursor: pointer;
        &:nth-of-type(3n){
          margin-right: 0;
        }
        div{
          .product-title{
            width: 384px;
            height:223px;
          }
          h5{
            font-size: 26px;
            font-weight: bold;
            color: #333333;
            font-family: 'PingFang-SC-Bold';
            line-height: 85px;
          }
          p{
            font-size: 14px;
            color: #666666;
            padding: 0 30px;
            text-align: left;
            line-height: 25px;
            width: 322px;
            height: 100px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            letter-spacing: 0px;
          }
        }
        .product-icon{
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%,50%);
          display: block;
          width: 50px;
          height: 50px;
          background: #4EBDD5;
          border-radius: 50%;
        }
        &:hover{
          margin-top:-4px;
          box-shadow:0px 2px 13px 2px rgba(78, 189, 213, 0.08);
        }
      }
    }
    /deep/.el-pagination{
      margin: 50px auto 80px;
      width: 400px;
      .el-pager{
        li{
          background: #ffffff;
          border: 1px solid #d3d3d3;
          color: #666666;
          margin: 0 0 0 15px;
          min-width: 25px;
          min-height: 25px;
          &.active{
            background:linear-gradient(45deg,rgba(32,166,196,1),rgba(126,213,233,1));
            color: #ffffff;
            border: none;
          }
        }
      }
      .btn-next{
        margin-left: 20px;
      }
    }
  }
}
</style>
